<template>
	<view class="page-main" :style="pageStyle">
		<view class="grid-group">
			<u-grid :border="false" align="center" @click="onGridClick">
				<u-grid-item v-for="(item,index) in gridList" :key="index">
					<view class="grid-img">
						<u--image :src="item.image" width="60rpx" height="60rpx" />
					</view>
					<text class="grid-text">{{item.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- <u-cell-group>
				<u-cell icon="/static/heart.png" isLink title="纪念日" url="anniversaries/anniversaries"></u-cell>
				<u-cell icon="/static/heart.png" isLink title="时光机" url="timeMachine/timeMachine"></u-cell>
				<u-cell icon="/static/heart.png" isLink title="姨妈助手" url="auntAssistant/auntAssistant"></u-cell>
			</u-cell-group> -->
	</view>
</template>

<script>

	export default {
		data() {
			return {
				pageStyle: {},
				gridList: [{
						image: '/static/jinianri.png',
						title: '纪念日',
						url: "anniversaries/anniversaries"
					},{
						image: '/static/shijianxian.png',
						title: '时间线',
						url: "timeline/timeline"
					},{
						image: '/static/ceyan.png',
						title: '情侣测验',
						url: "challenge/challenge"
					}, {
						image: '/static/suisuinian.png',
						title: '碎碎念',
						url: "whisper/whisper"
					},{
						image: '/static/zhangben.png',
						title: '小账本',
						url: "smallLedger/smallLedger"
					},{
						image: '/static/yima.png',
						title: '姨妈助手',
						url: "auntAssistant/auntAssistant"
					}, 
					// {
					// 	image: '/static/heart.png',
					// 	title: '抽签工具',
					// 	url: "auntAssistant/auntAssistant"
					// }, {
					// 	image: '/static/heart.png',
					// 	title: '投票系统',
					// 	url: "auntAssistant/auntAssistant"
					// }, {
					// 	image: '/static/heart.png',
					// 	title: '石头剪刀布',
					// 	url: "auntAssistant/auntAssistant"
					// }, {
					// 	image: '/static/heart.png',
					// 	title: '手持弹幕',
					// 	url: "auntAssistant/auntAssistant"
					// },
				]
			}
		},
		onShow() {
			if (this.$tools.getPartnerConfig()) {
				const bg = this.$tools.getPartnerConfig().pageBackground
				if (bg != this.pageStyle.background) {
					this.pageStyle = {
						background: bg.indexOf('http') >= 0 ? `url("${bg}") top repeat-y` : bg
					}
				}
			}
		},
		methods: {
			onGridClick(index) {
				uni.navigateTo({
					url: this.gridList[index].url
				});
			}
		}
	}
</script>

<style>

	.grid-group {
		background-color: rgba(255, 255, 255, 0.6);
		border-radius: 10px;
	}

	.grid-img {
		margin: auto;
		padding: 20rpx;
	}

	.grid-text {
		padding-bottom: 20rpx;
	}
</style>
